<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">教学成果修改</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索、添加、自定义列 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input placeholder="请输入标题" v-model="query.title">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getList"
              :show-overflow-tooltip="true"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="showAddDialog">添加教学成果</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="success" @click="showSetColumn">自定义列</el-button>
        </el-col>
      </el-row>
      <!-- 内容列表 -->
      <el-table :data="list" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column
          v-if="showColumns.find((i) => i.label == '标题').show"
          label="标题"
          prop="title"
          width="150"
          row-click="showDetailDialog(scope.row)"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          v-if="showColumns.find((i) => i.label == '所属栏目编号').show"
          label="所属栏目编号"
          prop="topicId"
          width="150"
          row-click="showDetailDialog(scope.row)"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          v-if="showColumns.find((i) => i.label == '内容').show"
          label="内容"
          prop="content"
          width="200"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          v-if="showColumns.find((i) => i.label == '排序').show"
          label="排序"
          prop="sort"
          width="150"
        >
        </el-table-column>
        <!-- <el-table-column
          v-if="showColumns.find((i) => i.label == '热点').show"
          label="热点"
          prop="hot"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.hot == 0 ? "否" : scope.row.hot == 1 ? "是" : "暂定" }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          v-if="showColumns.find((i) => i.label == '阅读量–后门').show"
          label="阅读量–后门"
          prop="count"
          width="120"
        ></el-table-column> -->
        <el-table-column
          v-if="showColumns.find((i) => i.label == '创建时间').show"
          label="创建时间"
          prop="createTime"
          width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime.substring(0, 16) }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showColumns.find((i) => i.label == '修改时间').show"
          label="修改时间"
          prop="modifyTime"
          width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.modifyTime.substring(0, 16) }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="showColumns.find((i) => i.label == '备注').show"
          label="备注"
          prop="remarks"
        ></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!-- 查看 -->
            <el-tooltip effect="dark" content="查看" placement="top">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="showDetailDialog(scope.row)"
              ></el-button>
            </el-tooltip>
            <!-- 修改 -->
            <el-tooltip effect="dark" content="修改" placement="top">
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="showEditDialog(scope.row)"
              ></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip
              v-if="scope.row.account != 'admin'"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="del(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 自定义列 -->
    <CustomColumn ref="columns" :showColumns="showColumns"></CustomColumn>

    <!-- 详情 -->
    <el-dialog
      title="详情"
      :visible.sync="showDetailVisible"
      width="70%"
      @close="hideDetailDialog"
    >
      <!-- 内容主体区域 -->
      <el-form :model="detail" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="18">
            <el-form-item label="标题">
              <el-input v-model="detail.title" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="所属栏目编号">
              <el-select
                disabled
                v-model="detail.topicId"
                placeholder="请选择"
                @change="handleAdd"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="排序:">
              <el-select disabled style="width: 100%" v-model="detail.sort">
                <el-option label="学生" :value="0"></el-option>
                <el-option label="教师" :value="1"></el-option>
                <el-option label="数据中心管理员" :value="2"></el-option>
                <el-option label="系统管理员" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="热点:">
              <el-select disabled style="width: 100%" v-model="addForm.hot">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="阅读量–后门">
              <el-input v-model.number="detail.count" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="30">
          <el-col
            ><el-form-item label="内容">
              <div
                class="editor-content"
                v-html="detail.content"
              /> </el-form-item
          ></el-col>
          <el-col :span="10">
            <el-form-item>
              <img :src="img3" alt="" style="width: 100%; height: 180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input
            disabled
            type="textarea"
            v-model="detail.remarks"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hideDetailDialog">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog
      title="新增"
      :visible.sync="showAddVisible"
      width="70%"
      @close="hideAddDialog"
    >
      <!-- 内容主体区域 -->
      <el-form :model="addForm" ref="addFormRef" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="18">
            <el-form-item
              label="标题"
              prop="title"
              :rules="[
                {
                  required: true,
                  message: '标题不能为空',
                  trigger: 'blur',
                },
                {
                  min: 1,
                  max: 30,
                  message: '长度须在1～30个字符之间',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input v-model="addForm.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item
              label="所属栏目编号"
              prop="topicId"
              :rules="[
                {
                  required: true,
                  message: '所属栏目编号不能为空',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                v-model="addForm.topicId"
                placeholder="请选择"
                @change="handleAdd"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="热点:">
              <el-select style="width: 100%" v-model="addForm.hot">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
                <el-option label="暂定" :value="null"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="10">
            <el-form-item label="排序:" prop="sort">
              <el-input v-model.number="addForm.sort"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="30">
          <!-- <el-col :span="10">
            <el-form-item label="阅读量–后门" prop="count">
              <el-input v-model.number="addForm.count"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
       <el-row :gutter="30">
          <el-col
            ><el-form-item label="内容" prop="content">
              <!-- <tinymce
                :height="300"
                ref="editor"
                v-model="addForm.content"
              ></tinymce> -->
              <el-tiptap
                lang="zh"
                v-model="addForm.content"
                :extensions="extensions"
              ></el-tiptap>
            </el-form-item></el-col>
        </el-row>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            v-model="addForm.remarks"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideAddDialog">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      title="修改"
      :visible.sync="showEditVisible"
      width="70%"
      @close="hideEditDialog"
    >
      <!-- 内容主体区域 -->
      <el-form :model="editForm" ref="editFormRef" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="18">
            <el-form-item label="标题" prop="title">
              <el-input v-model="editForm.title" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="所属栏目编号" prop="topicId">
              <el-select
                v-model="editForm.topicId"
                placeholder="请选择"
                @change="handleAdd"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8"> -->
            <!-- 是否为热点，0:否（默认），1:是 -->
            <!-- <el-form-item label="热点:" prop="hot">
              <el-select style="width: 100%" v-model="editForm.hot">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="10">
            <el-form-item label="排序:" prop="sort">
              <el-input v-model.number="editForm.sort"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="30">
          <!-- <el-col :span="10">
            <el-form-item
              label="阅读量–后门"
              prop="count"
              :rules="[
                { required: true, message: '内容不能为空', trigger: 'blur' },
              ]"
            >
              <el-input v-model.number="editForm.count"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="30">
          <el-col
            ><el-form-item label="内容" prop="content">
               <!-- <tinymce
                :height="300"
                ref="editor"
                v-model="editForm.content"
              ></tinymce> -->
              <el-tiptap
                lang="zh"
                v-model="editForm.content"
                :extensions="extensions"
              ></el-tiptap></el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="10">
            <el-form-item label="附件:" prop="type">
              <el-upload
                class="upload-demo"
                :action="img"
                :on-success="handleAvatarSuccess"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                ref="upload"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
                <div>
                  <img :src="img2" alt="" style="width: 100%; height: 100px" />
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <img :src="img3" alt="" style="width: 100%; height: 180px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            v-model="detail.remarks"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideEditDialog">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
import Tinymce from "@/components/Tinymce";
import CustomColumn from "./../components/CustomColumn.vue";
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Image,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  CodeBlock,
} from "element-tiptap";
import "element-tiptap/lib/index.css";
export default {
  components: { CustomColumn, Tinymce,"el-tiptap": ElementTiptap },
  data() {
    return {
      id: "",
      img: "",
      img2: "",
      img3: "",
      imageUrl: "",
      fileList: [],
      name: "",
      options: [],
      // 查询条件
      query: {
        name: "教学成果",
        topicId: 12,
        pageNum: 1,
        pageSize: 10,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      content: "",
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 3 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Image(),
        new Underline(), // 下划线
        new Italic(), // 斜体
        new Strike(), // 删除线
        new HorizontalRule(), // 华丽的分割线
        new ListItem(),
        new BulletList(), // 无序列表
        new OrderedList(), // 有序列表
        new TodoItem(),
        new TodoList(),
        new Fullscreen(),
        new Preview(),
        new CodeBlock(),
      ],
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "所属栏目编号", show: false },
        { label: "内容", show: true },
        { label: "排序", show: false },
        { label: "热点", show: true },
        { label: "阅读量–后门", show: false },
        { label: "创建时间", show: false },
        { label: "修改时间", show: false },
        { label: "备注", show: true },
      ],
      query1: {
        name: "教学成果",
        topicId: 12,
        pageNum: 1,
        pageSize: "",
      },
      query2: {
        buzId: "",
        typeDictItemId: 5,
      },
      // 内容列表
      list1: [],
      // 内容总条数
      total1: 0,
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
      // 是否显示新增
      showAddVisible: false,
      // 新增数据
      addForm: {},
      // 是否显示修改
      showEditVisible: false,
      // 修改数据
      editForm: {},
    };
  },
  created() {
    this.getList1();
    this.getList();
  },
  methods: {
    // 显示自定义列
    showSetColumn() {
      this.$refs.columns.dialogVisible = true;
    },
    // 获取内容列表
    getList1() {
      this.$http.post("/v1/api/topics/page", this.query1).then((res) => {
        if (res.data.code == 0) {
          var gotList = res.data.data.list;
          gotList.forEach((v) => {
            this.options.push({
              value: v.name,
              id: v.id,
            });
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getList() {
      this.$http.post("/v1/api/newses/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleChange() {
      this.query.topicId = this.name;
      this.getList();
      console.log(this.name);
    },
    handleAdd() {
      this.query.topicId = this.name;
      console.log(this.name);
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
    handleSizeChange1(pageSize) {
      this.query1.pageSize = pageSize;
      this.getList1();
    },
    // 监听 page 改变的事件
    handleCurrentChange1(page) {
      this.query1.pageNum = page;
      this.getList1();
    },
    // 显示详情
    showDetailDialog(row) {
      this.detail = row;
      this.showDetailVisible = true;
      this.imgid = row.id;
      console.log(this.imgid);
      this.query2.buzId = this.imgid;
      this.$http.post("/v1/api/attachments/page", this.query2).then((res) => {
        if (res.data.code == 0) {
          this.list1 = res.data.data.list;
          this.total1 = res.data.data.total;
          // console.log(this.list1)
          this.img3 =
            "http://121.37.144.250:1010/v1/api/attachments/" + this.list1[0].id;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 隐藏详情
    hideDetailDialog() {
      this.detail = {};
      this.showDetailVisible = false;
    },
    // 显示新增
    showAddDialog() {
      this.addForm = {
        content: "",
        hot: "",
        remarks: "",
        title: "",
        topicId: "",
      };
      this.showAddVisible = true;
    },
    // 隐藏新增
    hideAddDialog() {
      this.showAddVisible = false;
    },
    // 新增
    add() {
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          this.$http.post("/v1/api/newses", this.addForm).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.$message.success("新增成功");
              this.showAddVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    // 删除
    del(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete("/v1/api/newses/" + id).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.$message.success("删除成功");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    // 显示修改
    showEditDialog(row) {
      this.editForm = row;
      this.showEditVisible = true;
      this.img =
        "http://121.37.144.250:1010/v1/api/attachments/typeDictItem/5/buz/" +
        row.id;
      this.imgid = row.id;
      console.log(this.imgid);
      this.query2.buzId = this.imgid;
      this.$http.post("/v1/api/attachments/page", this.query2).then((res) => {
        if (res.data.code == 0) {
          this.list1 = res.data.data.list;
          this.total1 = res.data.data.total;
          // console.log(this.list1)
          this.img3 =
            "http://121.37.144.250:1010/v1/api/attachments/" + this.list1[0].id;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data.id;
      this.img2 =
        "http://121.37.144.250:1010/v1/api/attachments/" + this.imageUrl;
    },
    // 隐藏修改
    hideEditDialog() {
      this.showEditVisible = false;
    },
    // 修改
    edit() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.$http.put("/v1/api/newses", this.editForm).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.$message.success("修改成功");
              this.showEditVisible = false;
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
</style>
